<%@page contentType="text/html;charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<title>部门</title>
		<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/bumen.js"></script>
	<style>
		.pagination.square {
			margin: 0; /* 去除外边距*/
			}
			
			.pagination.square > li > a,
			.pagination.square > li > span {
				margin: 0 5px;
				border: 1px solid #dddddd; /* 设置所有的边框都为1像素*/
			}
			.pagination.square > li:first-child > a,
			.pagination.square > li:first-child > span,
			.pagination.square > li:last-child > a,
			.pagination.square > li:last-child > span {
				margin-left: 0px;
				padding-left: 10px;
				padding-right: 10px;
				border-radius: 0px; /* 取消圆角*/
			}
		.abc tr{
			height: 26px;
		}
	</style>
	
	</head>
	<body>
		<!-- Modal1 新增 -->
		<div class="modal fade" id="newPopUp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">Add Department</h4>
		      </div>
		      <div class="modal-body">
		    	<form class="form-horizontal">
		    		<div class="form-group">
		    			<label for="inputEmail3" class="col-sm-4 control-label">Departmnet Name</label>
		    			<div class="col-sm-8"><input type="Name" class="form-control" id="Name">
		    			</div>
		    		</div>
		    		<div class="form-group">
		    			<label for="inputPassword3" class="col-sm-4 control-label">Description</label>
		    			<div class="col-sm-8">
		    				<input type="text" class="form-control" id="Description">
		    			</div>
		    		</div>
		    	</form>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-success" id="btnCreate" >添加</button>
		        <button type="button" class="btn btn-warning" id="btnReset">Reset</button>
		      </div>
		    </div>
		  </div>
		</div>
		
		<!-- Modal2 修改 -->
		<div class="modal fade" id="modify" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">Update Department</h4>
		      </div>
		      <div class="modal-body">
		    	<form class="form-horizontal">
		    		<div class="form-group">
		    			<label for="inputEmail3" class="col-sm-4 control-label">Departmnet Name</label>
		    			<div class="col-sm-8">
		    				<input type="Name" class="form-control" id="Name1">
		    			</div>
		    		</div>
		    		<div class="form-group">
		    			<label for="inputPassword3" class="col-sm-4 control-label">Description</label>
		    			<div class="col-sm-8">
		    				<input type="text" class="form-control" id="Description1">
		    			</div>
		    		</div>
		    	</form>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-primary" id="btnCreate1">修改</button>
		        <button type="button" class="btn btn-warning" id="btnReset1">Reset</button>
		      </div>
		    </div>
		  </div>
		</div>
		
		<h2 style="text-align: center;">部门管理</h2>
		<div class="panel panel-default">
			<div class="panel-heading clearfix">
				<div class="pull-left">
					<a type="button" class="btn btn-default" href="${pageContext.request.contextPath}/zal.do?method=1">返回</a>
					<button class="btn btn-success" data-toggle="modal" data-target="#newPopUp" data-backdrop="static">Add Department</button>
				</div>
			</div>
			
			
		<table id="List" class="table table-bordered table-hover">
			<thead>
				<tr class="shouru">
					<td class="col-sm-4 control-label">Department Name</td>
					<td class="col-sm-6 control-label">Description</td>
					<td class="col-sm-2 control-label">modify</td>
				</tr>
			</thead>
			
			<c:forEach items="${datas['department']}" var="department">
			<tbody class="abc">
				<tr>
					<td deparmetId="${department.id}">${department.departmentName }</td>
					<td>${department.description }</td>
					<td align="center"><button type="button" class="btn btn-primary alter" data-toggle="modal" data-target="#modify" data-backdrop="static" >修改</button></td>
				</tr>
			</tbody>
			</c:forEach>
		</table>
		
		
		<ul class="list-group">
			<li class="list-group-item">
				<ul class="pagination square">
					<li class="active"><a href="${pageContext.request.contextPath}/department1.do?currentPage=1">首页<span class="sr-only">(current)</span></a></li>
					<li><a href="${pageContext.request.contextPath}/department1.do?currentPage=${page.currentPage-1}">上一页</a></li>
					<li><a href="${pageContext.request.contextPath}/department1.do?currentPage=${page.currentPage+1}">下一页</a></li>
					<li><a href="${pageContext.request.contextPath}/department1.do?currentPage=${page.totalPage}">尾页</a></li>
				</ul>
				
			</li>
		</ul>
		</div>
	</body>
</html>